<template>
  <div class="List">
    <div class="list-item" v-for="(item, index) in List" :key="item.Id">
      <div class="grands">{{ item.grand }}</div>
      <div class="Titles" v-for="li in item.list" :key="li.id">
        <div class="item-top">
          <div class="Tleft">
            <div class="title">奖品</div>
            <div class="Ttitle" :title="li.name">{{ li.name }}</div>
          </div>
          <div class="Tcenter">
            <div class="title">获奖人数</div>
            <div class="Ttitle">{{ li.size }}</div>
          </div>
          <div class="Topera">
            <div class="title">操作</div>
            <div class="btnLuck">
              <div>
                <!-- 两个操作 你的明白 -->
                <el-button
                  class="btnClass"
                  :class="{ btnDisabled: li.disabled }"
                  @click="btnLuck(index, li, li.id)"
                  size="mini"
                  :disabled="li.disabled"
                  >{{ !li.disabled ? '点击抽奖' : '已结束' }}</el-button
                >
              </div>
            </div>
          </div>
        </div>
        <div class="item-bottom">
          <div class="LockContainer">
            <div class="top">
              <img src="@/assets/zhongjiang.png" alt="" />
            </div>
            <div class="name" v-if="li.winPrize.length">
              <span v-for="LuckP in li.winPrize" :key="LuckP">{{ LuckP }}</span>
              <!-- <el-tag
                class="tags"
                v-for="LuckP in li.winPrize"
                :key="LuckP"
                closable
                :disable-transitions="false"
                @close="handleClose(LuckP)"
              >
                {{ LuckP }}
              </el-tag> -->
            </div>
            <span v-else class="name">暂无数据</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import PrizeList from './PrizeList'
var localData = localStorage.getItem('FirstDate')
if (localData) {
  // console.log('有数据')
  localStorage.setItem('FirstDate', JSON.stringify(PrizeList.List))
} else {
  // console.log('无数据 更新')
  localStorage.setItem('FirstDate', JSON.stringify(PrizeList.List))
}
var first = localStorage.getItem('firstPrize')
if (!first) {
  localStorage.setItem(
    'firstPrize',
    JSON.stringify({
      id: 1,
      name: '文记星兔儿爷礼盒',
      grand: '五等奖',
      winPrize: [],
      disabled: false,
      url: require('@/assets/05-01.png'),
      size: 5
    })
  )
}
export default {
  data() {
    return {
      List: localStorage.getItem('FirstDate') ? JSON.parse(localStorage.getItem('FirstDate')) : PrizeList.List,
      activeIndex: null,
      activeId: null,
      clearTag: [],
      indexData: null
    }
  },
  mounted() {
    window.addEventListener('beforeunload', () => {
      this.$emit('clearLuck')
      if (!first) {
        this.$emit('btnPrize', this.indexData, this.activeIndex, this.activeId)
      }
    })
  },
  methods: {
    handleClose(tag) {
      this.clearTag.push(tag)
      console.log(this.activeIndex)
      this.List[this.activeIndex].list.forEach(ele => {
        console.log(ele)
        if (ele.id === this.activeId) {
          ele.winPrize.splice(ele.winPrize.indexOf(tag), 1)
          localStorage.setItem('FirstDate', JSON.stringify(this.List))
        }
      })
      // 修改数据
      this.$emit('changSelect', tag)
    },
    btnLuck(index, item, id) {
      // 清除上一次中奖名单
      if (this.$store.state.leftInter) {
        this.$message.error('请等待上一次抽奖完毕111')
        return
      }
      if (this.$store.state.showFlag) {
        this.$message.error('请等待上一次抽奖完毕222')
        return
      }

      this.activeIndex = index
      this.activeId = id
      // 这个是避免重复点击
      if (item.disabled) {
        return
      }
      this.$emit('clearLuck')
      this.indexData = null
      this.List[index].list.forEach(ele => {
        if (ele.id === id) {
          ele.disabled = true
          this.indexData = ele
          localStorage.setItem('FirstDate', JSON.stringify(this.List))
        }
      })

      this.$emit('btnPrize', this.indexData, index, id)
      localStorage.setItem('firstPrize', JSON.stringify(this.indexData))
      this.clearTag = []
    },
    showPeople(item) {
      console.log(item)
      this.List[this.activeIndex].list.forEach(ele => {
        if (ele.id === this.activeId) {
          item.forEach(it => {
            ele.winPrize.push(it.name)
          })
          localStorage.setItem('FirstDate', JSON.stringify(this.List))
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.List {
  // background-color: pink;
  // border: 2px solid #fedb99;
  overflow: auto;
  height: 95%;
  background-color: #c94137;

  .list-item {
    border: 2px solid #fedb99;
    margin-bottom: 10px;
    .item-bottom {
      .LockContainer {
        border: 1px solid #fedb99;
        padding: 10px;
        margin: 10px;

        .top {
          text-align: center;
        }

        .name {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #fedb99;
          .tags {
            margin-left: 5px;
            margin-bottom: 5px;
          }
          span {
            margin-left: 5px;
          }
        }
      }
    }

    .Titles {
      .item-top {
        display: flex;
        padding: 10px;

        .Tleft {
          width: 33%;

          .title {
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #c02626;
            background: linear-gradient(0deg, #ffd179 0%, #ffffff 50%, #ffd387 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 20px;
            // 来一个一行 省略的字体
          }

          .Ttitle {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #fff;
          }
        }

        .Tcenter {
          width: 33%;

          .title {
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #c02626;
            background: linear-gradient(0deg, #ffd179 0%, #ffffff 50%, #ffd387 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 20px;
          }

          .Ttitle {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #fff;
          }
        }

        .Topera {
          width: 33%;

          .title {
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #c02626;
            background: linear-gradient(0deg, #ffd179 0%, #ffffff 50%, #ffd387 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 20px;
          }

          .btnClass {
            width: 85px;
            height: 26px;
            background-color: #fedb99;
            color: #c02626;
            border: none;
            border-radius: 23px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: bold;
          }

          .btnDisabled {
            background-color: #bdbdbd;
          }

          .Ttitle {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #fff;
          }
        }
      }

      // display: flex;
      // background-color: yellow;
      // padding: 10px 10px;
    }

    .grands {
      background-color: #fedb99;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #c02626;
      text-align: center;
      height: 28px;
      line-height: 28px;
    }
  }
}

.List::-webkit-scrollbar {
  display: none;
}
</style>
